
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="/static/js/jquery.js"></script>
<body>
<h2>Hello World!</h2>
<form action="/upload.do" method="post" enctype="multipart/form-data">
    文件上传<input type="file" name="source"><br>
    <input type="submit" value="上传">
</form>


<div>
    <div>
        <!-- 图片路径是服务器路径 -->
        <img width="300px" src="/upload_file/2e56f3ef-8923-44ab-9270-c8a44c5b0cd1.jpg">
        <button>
            <!-- 下载时,请求中携带文件名即可 -->
            <a href="/download.do?filename=2e56f3ef-8923-44ab-9270-c8a44c5b0cd1.jpg">下载</a>
        </button>
    </div>
    <div>
        <img width="300px" src="/upload_file/1.jpg">
        <a href="/download.do?filename=1.jpg">下载</a>
    </div>
</div>

<!-- 回显图片 -->
<img width="300px" id="img" src="/upload_file/1.jpg" alt="图片">


<script>
    // 文件上传
    function ajaxUpload(){
        // 获得表单对象
        var formData = new FormData($("#formData")[0]);
        // 使用ajax文件上传
        $.ajax({
            url:"/upload.do",
            type:"post",
            data:formData,
            async:false,
            cache:false,
            contentType:false,
            processData:false,
            success:function (ret) {
                if (ret.code == 0) {
                    console.log(ret.data)
                    $("#img").attr("src",ret.data);
                }else{
                    alert("上传失败1");
                }
            },
            error:function () {
                alert("上传失败2");
            }
        });
    }
</script>
</body>



</html>
